<template>
  <!-- 1
     action="" 上传地址-必填参数
    :show-file-list="false" 是否显示已上传的文件列表
    :before-upload="" 2.校验文件格式和大小
    http-request="" 3. 自定义上传
    -->
  <el-upload
    class="avatar-uploader"
    action=""
    :before-upload="beforeAvatarUpload"
    :http-request="uploadImage"
  >
    <!-- (自动上传)action是上传地址 人资项目不需要 人资项目(手动上传)  -->
    <!-- show-file-list不展示列表 -->
    <img v-if="value" :src="value" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>

</template>

<script>
/*
 腾讯云cos上传业务流程
 1. 用的el-upload组件
 2. 校验文件 借助before-upload事件,  => 校验文件格式和大小
 3. 上传文件 借助http-request事件, => 自定义上传
 4. 用COS云存储桶
 4.1 申请云存储桶
 4.2 配置 桶名称 区域 跨域 秘钥id 秘钥的key
 4.3 下包 sdk
 4.4 腾讯云uploadFile方法 自动根据文件大小, 开始断点续传, 默认超过1M就开始断点续传, 可以自定义
 5. 上传成功后, 得到图片地址, 位置Location
 6. 把图片地址, 拼接上 http://, 赋值给value, 父组件就可以拿到图片地址做渲染了

*/
// 1.1 下包 npm i cos-js-sdk-v5 --save
// 1.2 导入
import COS from 'cos-js-sdk-v5'
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 3.检查函数 判断文件的类型还有大小 return  true(继续上传)/false(停止上传)
    beforeAvatarUpload(file) {
      // jpeg png gif bmp

      /* 检验文件格式 */
      const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)
      const isLt2M = file.size / 1024 / 1024 < 5 // 5M

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG PNG GIF BMP 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    // 4. 上传文件
    uploadImage(e) {
    //   console.log('e  ----->  ', e.file) // 上传的文件对象

      // 4.1 实例化COS对象
      const cos = new COS({
        SecretId: 'AKIDVt45yfXBgz5zgLp9HD1zxkNp7D9tQkso', // 秘钥id
        SecretKey: 'sWyDF4h72mJdkfQ1RfiZEguxpJZcS4Th' // 秘钥key
      })
      // 4.2 调用uploadFile方法上传文件
      cos.uploadFile({
        Bucket: 'rz03-1319384897', /* 填写自己的 存储桶名称，必须字段 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: e.file.name, /* 文件名称，必须字段 */
        Body: e.file // 上传文件对象
        // SliceSize: 1024 * 1024 * 5, /* 触发分块上传的阈值，超过5MB使用分块上传(默认超过1M就切片上传)，小于5MB使用简单上传。可自行设置，非必须 */
        // onProgress: function(progressData) { // 上传进度
        //   console.log(JSON.stringify(progressData))
        // }
      }, (err, data) => {
        if (err) {
          console.log('上传失败', err)
        } else {
          console.log('上传成功', data)
          // 4.3 statusCode上传成功的状态码, Location上传成功后的地址, 拼接上http://
          if (data.statusCode === 200 && data.Location) {
            this.$emit('input', 'http://' + data.Location)
          }
        }
      })
    }
  }
}
</script>

  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>
